<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <meta name="referrer" content="no-referrer" />
    <script src="./lib/dist/include-openlayers-local.js"></script>
  </head>
  <body>
    <button onclick="activeIcon()">添加图片标注</button>
    <button onclick="stopIcon()">停止图片标注</button>
    <button onclick="removeIcon()">移除图片标注</button>
    <button onclick="activeText()">添加文字标注</button>
    <button onclick="stopText()">停止文字标注</button>
    <button onclick="removeText()">移除文字标注</button>
    <div id="map"></div>
    <script>
      const tianDiTu_vec = new ol.layer.Tile({
        title: '天地图矢量图层',
        source: new ol.source.XYZ({
          url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + '27179df627e03e8300f1d4beb0fd40f0',
          wrapX: false
        })
      })
      const tianDiTu_cva = new ol.layer.Tile({
        title: '天地图矢量标记图层',
        source: new ol.source.XYZ({
          url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + '27179df627e03e8300f1d4beb0fd40f0',
          wrapX: false
        })
      })
      /* 一、加载底图 */
      const map = new ol.Map({
        target: 'map',
        layers: [tianDiTu_vec, tianDiTu_cva],
        view: new ol.View({
          projection: 'EPSG:4326', // 经纬度坐标系(默认是默卡托坐标系)
          center: [104.54969, 30.39209],
          zoom: 12
        })
      })
      // 二. 通过Style类创建icon
      const icon = new ol.style.Style({
        /**{olx.style.IconOptions}类型*/
        image: new ol.style.Icon({
          // anchor: [1, 1],
          // anchorOrigin: 'top-right',
          // anchorXUnits: 'fraction',
          // anchorYUnits: 'pixels',
          // offsetOrigin: 'top-right',
          offset: [10, 10],
          //图标缩放比例
          scale: 0.1,
          //透明度
          opacity: 0.7,
          //图标的url
          src: './1.png'
        })
      })

      let point_Icons = []
      let vectorimg
      function addIcon(e) {
        let point_Icon = new ol.Feature({
          geometry: new ol.geom.Point([e.coordinate[0], e.coordinate[1]])
        })
        point_Icons.push(point_Icon)
        point_Icon.setStyle(icon)
        /* 四、创建矢量数据 */
        let source = new ol.source.Vector({
          features: [...point_Icons]
        })
        if (vectorimg) {
          map.removeLayer(vectorimg)
        }
        /* 五、创建矢量图层，加载矢量数据源 */
        vectorimg = new ol.layer.Vector({
          source: source
        })
        // 六、在map中加载矢量图层
        map.addLayer(vectorimg)
      }
      function activeIcon() {
        map.on('click', addIcon)
      }
      function stopIcon() {
        map.un('click', addIcon)
      }
      function removeIcon() {
        point_Icons = []
        map.removeLayer(vectorimg)
        map.un('click', addIcon)
      }
      // console.log(map.getLayers().array_)
      let point_texts = []
      let vectorText
      let markText
      function addText(e) {
        let txt = new ol.style.Style({
          text: new ol.style.Text({
            offsetX: 0,
            offsetY: -35,
            font: 'bold 12px 微软雅黑',
            text: markText,
            fill: new ol.style.Fill({ color: '#333' }),
            stroke: new ol.style.Stroke({ color: '#ff2d51', width: 2 })
          }),
          image: new ol.style.Icon({
            // anchor: [1, 1],
            // anchorOrigin: 'top-right',
            // anchorXUnits: 'fraction',
            // anchorYUnits: 'pixels',
            // offsetOrigin: 'top-right',
            offset: [10, 10],
            //图标缩放比例
            scale: 0.1,
            //透明度
            opacity: 0.7,
            //图标的url
            src: './1.png'
          })
        })
        // 三、创建点要素, 设置点要素样式
        const point_text = new ol.Feature({
          geometry: new ol.geom.Point([e.coordinate[0], e.coordinate[1]])
        })
        point_texts.push(point_text)
        point_text.setStyle(txt)
        /* 四、创建矢量数据 */
        const source = new ol.source.Vector({
          features: [...point_texts],
          wrapX: false
        })
        if (vectorText) {
          map.removeLayer(vectorText)
        }
        /* 五、创建矢量图层 */
        vectorText = new ol.layer.Vector({
          source: source
        })
        map.addLayer(vectorText)
      }
      function activeText() {
        markText = prompt('请输入标注信息')
        map.on('click', addText)
      }
      function stopText() {
        map.un('click', addText)
      }
      function removeText() {
        point_texts - []
        map.un('click', addText)
        map.removeLayer(vectorText)
      }
    </script>
  </body>
</html>
